<template>
  <div class="container">
    <div class="form-group">
      <button class="button" @click="getIndustryDefault()">按照行业违约展示</button>
      <button class="button" @click="getIndustryRedo()">按照行业重生展示</button>
      <button class="button" @click="getRegionDefault()">按照地域违约展示</button>
      <button class="button" @click="getRegionRedo()">按照地域重生展示</button>
    </div>
    <div class="box" id="main"></div>
  </div>


</template>

<script>
import * as echarts from 'echarts';

export default {
  name:"LineEcharts",
  data(){
    return{
      chart: null,
      allList:[],
      artificial_intelligence:[],
      data_analytics:[],
      mobile_apps:[],
      software_development:[],
      web_development:[],
      beijing:[],
      london :[],
      singapore :[],
      sydney : [],
      tokyo : [],
      test:[]
    }
  },

  mounted() {

  },
  methods: {
    async getIndustryDefault(){
      let artificial_intelligence=[]
      let data_analytics=[]
      let mobile_apps=[]
      let software_development=[]
      let web_development=[]

      const {data: res} = await this.$http.get('/industryInfo/defaultSituation')
      this.allList=res.data
      console.log(this.allList)
      this.allList.forEach(function (element){
        console.log(element)
        element.classificationList.forEach(function(element2){
          console.log(element2)
          console.log(element2.category)
          if(element2.category === "artificial_intelligence"){
            console.log(element2.count)
            artificial_intelligence.push(element2.count);
          }
        })
      })
      this.artificial_intelligence=artificial_intelligence

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "data_analytics"){
            data_analytics.push(element2.count);
          }
        })
      })
      this.data_analytics=data_analytics

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "mobile_apps"){
            mobile_apps.push(element2.count);
          }
        })
      })
      this.mobile_apps=mobile_apps

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "software_development"){
            software_development.push(element2.count);
          }
        })
      })
      this.software_development=software_development

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "software_development"){
            web_development.push(element2.count);
          }
        })
      })
      this.web_development=web_development


      let option = {
        title: {
          text: '统计行业违约情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['artificial_intelligence', 'data_analytics', 'mobile_apps', 'software_development', 'web_development']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["2019","2020","2021","2022","2023"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'artificial_intelligence',
            type: 'line',
            //stack: 'Total',
            data: this.artificial_intelligence
          },
          {
            name: 'data_analytics',
            type: 'line',
            //stack: 'Total',
            data: this.data_analytics
          },
          {
            name: 'mobile_apps',
            type: 'line',
            //stack: 'Total',
            data: this.mobile_apps
          },
          {
            name: 'software_development',
            type: 'line',
            //stack: 'Total',
            data: this.software_development
          },
          {
            name: 'web_development',
            type: 'line',
            //stack: 'Total',
            data: this.web_development
          }
        ]
      }
      this.initChart(option)

    },


    async getIndustryRedo(){
      let artificial_intelligence=[]
      let data_analytics=[]
      let mobile_apps=[]
      let software_development=[]
      let web_development=[]

      const {data: res} = await this.$http.get('/industryInfo/redoSituation')
      this.allList=res.data
      console.log(this.allList)
      this.allList.forEach(function (element){
        console.log(element)
        element.classificationList.forEach(function(element2){
          console.log(element2)
          console.log(element2.category)
          if(element2.category === "artificial_intelligence"){
            console.log(element2.count)
            artificial_intelligence.push(element2.count);
          }
        })
      })
      this.artificial_intelligence=artificial_intelligence

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "data_analytics"){
            data_analytics.push(element2.count);
          }
        })
      })
      this.data_analytics=data_analytics

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "mobile_apps"){
            mobile_apps.push(element2.count);
          }
        })
      })
      this.mobile_apps=mobile_apps

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "software_development"){
            software_development.push(element2.count);
          }
        })
      })
      this.software_development=software_development

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "software_development"){
            web_development.push(element2.count);
          }
        })
      })
      this.web_development=web_development


      let option = {
        title: {
          text: '统计行业违约情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['artificial_intelligence', 'data_analytics', 'mobile_apps', 'software_development', 'web_development']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["2019","2020","2021","2022","2023"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'artificial_intelligence',
            type: 'line',
            //stack: 'Total',
            data: this.artificial_intelligence
          },
          {
            name: 'data_analytics',
            type: 'line',
            //stack: 'Total',
            data: this.data_analytics
          },
          {
            name: 'mobile_apps',
            type: 'line',
            //stack: 'Total',
            data: this.mobile_apps
          },
          {
            name: 'software_development',
            type: 'line',
            //stack: 'Total',
            data: this.software_development
          },
          {
            name: 'web_development',
            type: 'line',
            //stack: 'Total',
            data: this.web_development
          }
        ]
      }
      this.initChart(option)

    },

    async getRegionDefault(){
      let beijing=[]
      let london=[]
      let singapore=[]
      let sydney=[]
      let tokyo=[]

      const {data: res} = await this.$http.get('/regionInfo/defaultSituation')
      this.allList=res.data
      console.log(this.allList)
      this.allList.forEach(function (element){
        console.log(element)
        element.classificationList.forEach(function(element2){
          console.log(element2)
          console.log(element2.category)
          if(element2.category === "beijing"){
            console.log(element2.count)
            beijing.push(element2.count);
          }
        })
      })
      this.beijing=beijing

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "london"){
            london.push(element2.count);
          }
        })
      })
      this.london=london

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "singapore"){
            singapore.push(element2.count);
          }
        })
      })
      this.singapore=singapore

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "sydney"){
            sydney.push(element2.count);
          }
        })
      })
      this.sydney=sydney

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "tokyo"){
            tokyo.push(element2.count);
          }
        })
      })
      this.tokyo=tokyo


      let option = {
        title: {
          text: '统计区域违规情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['beijing', 'london', 'singapore', 'sydney', 'tokyo']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["2019","2020","2021","2022","2023"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'beijing',
            type: 'line',
            //stack: 'Total',
            data: this.beijing
          },
          {
            name: 'london',
            type: 'line',
            //stack: 'Total',
            data: this.london
          },
          {
            name: 'singapore',
            type: 'line',
            //stack: 'Total',
            data: this.singapore
          },
          {
            name: 'sydney',
            type: 'line',
            //stack: 'Total',
            data: this.sydney
          },
          {
            name: 'tokyo',
            type: 'line',
            //stack: 'Total',
            data:  this.tokyo
          }
        ]
      };
      this.initChart(option)

    },

    async getRegionRedo(){
      let beijing=[]
      let london=[]
      let singapore=[]
      let sydney=[]
      let tokyo=[]

      const {data: res} = await this.$http.get('/regionInfo/redoSituation')
      this.allList=res.data
      console.log(this.allList)
      this.allList.forEach(function (element){
        console.log(element)
        element.classificationList.forEach(function(element2){
          console.log(element2)
          console.log(element2.category)
          if(element2.category === "beijing"){
            console.log(element2.count)
            beijing.push(element2.count);
          }
        })
      })
      this.beijing=beijing

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "london"){
            london.push(element2.count);
          }
        })
      })
      this.london=london

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "singapore"){
            singapore.push(element2.count);
          }
        })
      })
      this.singapore=singapore

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "sydney"){
            sydney.push(element2.count);
          }
        })
      })
      this.sydney=sydney

      this.allList.forEach(function(element){
        element.classificationList.forEach(function(element2){
          if(element2.category === "tokyo"){
            tokyo.push(element2.count);
          }
        })
      })
      this.tokyo=tokyo


      let option = {
        title: {
          text: '统计区域违规情况'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['beijing', 'london', 'singapore', 'sydney', 'tokyo']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ["2019","2020","2021","2022","2023"]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'beijing',
            type: 'line',
            //stack: 'Total',
            data: this.beijing
          },
          {
            name: 'london',
            type: 'line',
            //stack: 'Total',
            data: this.london
          },
          {
            name: 'singapore',
            type: 'line',
            //stack: 'Total',
            data: this.singapore
          },
          {
            name: 'sydney',
            type: 'line',
            //stack: 'Total',
            data: this.sydney
          },
          {
            name: 'tokyo',
            type: 'line',
            //stack: 'Total',
            data:  this.tokyo
          }
        ]
      };
      this.initChart(option)

    },



    initChart(option){
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));
      myChart.setOption(option)
    }

  },

  created() {
    this.getIndustryDefault()
  }
}

</script>






<style scoped lang="less">
  .container {
    display: flex;
    align-items: flex-start;
    overflow: auto;
  }

  .form-group {
    display: block;
    margin-top: 150px;
    margin-right: 100px;
    margin-left: 50px;
  }
  button {
    display:block;
    width: 250px;
    height:100px;
    padding: 8px 8px;
    border: none;
    border-radius: 5px;
    background-color: #4c5baf;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .box {
    display: inline-block;
    width: 1000px;
    height: 700px;
    background-color: rgb(188, 227, 236);
  }
</style>